<template>
  <el-page-header @back="goBack">
    <template #content>
      <span class="text-large font-600 mr-3"> 健康百科 </span>
    </template>
  </el-page-header>

  <el-row class="el-row">
    <el-col :span="6">
      <el-form-item label="专题咨询:">
        <el-select v-model="value" placeholder="Select" style="width: 240px" @change="updateOptions">
          <el-option v-for="item in options" :key="item.id" :label="item.encyname" :value="item.encyname" />
        </el-select>
      </el-form-item>
    </el-col>

    <el-col :span="6" class="col">
      <el-form-item label="相关文章:">
        <el-select v-model="value2" placeholder="Select" style="width: 240px" @change="onSubmit">
          <el-option v-for="item in options1" :key="item.id" :label="item.encyname" :value="item.encyname" />
        </el-select>
      </el-form-item>
    </el-col>

    <el-col :span="2">
      <el-button @click="onSubmit1">热门文章</el-button>
    </el-col>
  </el-row>

  <!-- 文章列表显示 -->
  <div class="app">
    <div class="post" v-for="item in articleList" :key="item.id">
      <div class="post-title">{{ item.antititle }}</div>
      <div class="post-content">
        <el-text truncated>{{ item.anticontent }}</el-text>
      </div>
      <!-- 详情按钮 -->
      <el-button type="primary" @click="showDetails(item)">详情</el-button>
    </div>
  </div>
  <el-pagination background layout="prev, pager, next" :total="totalCount" default-page-size="3" v-model:current-page="currentPage" v-model:page-size="pageSize"
                 @update:page-size="getHotarticles" @update:current-page="getHotarticles" :hide-on-single-page="issingle" v-show="showPagination"
  />
  <!-- 文章详情弹窗 -->
  <el-drawer v-model="drawer" title="文章详情" size="30%" :with-header="false">
    <div class="article-details">
      <div class="article-info" v-if="currentArticle">
        <h2 class="article-title">{{ currentArticle.articles }}</h2>
        <p class="article-subtitle"><strong></strong> {{ currentArticle.antititle }}</p>
        <p class="article-content"><strong></strong> {{ currentArticle.anticontent }}</p>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import axios from "axios";
import { attachImg } from "@/api";

export default {
  name: "HealthBaike",
  data() {
    return {
      articleList: [],
      hotArticlesList: [],
      formInfo:{},//携带分页数据
      options: [],
      options1: [],
      value: "",
      value2: "",
      totalCount:0,
      currentPage:1,
      pageSize:4,
      issingle:true,

      showPagination: true,
      drawer: false,
      currentArticle: null, // 用于存储当前选择的文章
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getHotarticles();
    });
  },
  mounted() {
    this.getFirstList();
  },
  methods: {
    attachImg,
    goBack() {
      this.$router.back();
    },
    getFirstList() {
      axios
          .get("http://localhost:9099/Baike/menuFirstFind")
          .then((response) => {
            this.options = response.data.data;
          })
          .catch((error) => {
            console.error("Error fetching data:", error);
          });
    },
    getSecondList(encyName) {
      axios
          .get("http://localhost:9099/Baike/menuSecondFindByEncyName", {
            params: { encyName },
          })
          .then((response) => {
            if (response.data.code === 200) {
              this.options1 = response.data.data;
            } else {
              this.$message.error("未能找到对应的二级标题");
            }
          });
    },
    getHotarticles() {
      this.formInfo.currentPageNo=this.currentPage;
      this.formInfo.pageSize=this.pageSize;
      axios
          .get("http://localhost:9099/Baike/baikeHot" ,{ params: this.formInfo,})
          .then((res) => {
            this.articleList = res.data.data;
          })
          .catch((error) => {
            console.error("请求失败:", error);
          });
      this.getAllArticlesCount()
    },
    getAllArticlesCount() {

        // 发送 GET 请求
        axios.get('http://localhost:9099/Baike/querycount')
            .then(res => {
              this.totalCount = res.data.data;
            })
            .catch(error => {
              console.error('请求失败:', error);
              // 处理错误，例如显示错误消息
            });

    },
    updateOptions() {
      if (this.value) {
        this.getSecondList(this.value);
      } else {
        this.options1 = [];
      }
      this.articleList = "";
      this.value2 = "";
    },
    onSubmit() {
      this.showPagination = false;
      axios
          .get(`http://localhost:9099/Baike/baikeArticleFindByEncyName?encyName=${this.value2}`)
          .then((res) => {
            this.articleList = res.data.data;
          })
          .catch((error) => {
            console.error("请求失败:", error);
          });
    },
    onSubmit1() {
      this.showPagination=true
      this.getHotarticles();
      this.value = "";
      this.value2 = "";
    },
    showDetails(article) {
      // 打开详情弹窗并设置当前文章
      this.currentArticle = article;
      this.drawer = true;
    },
  },

};
</script>

<style>
/* 整体布局 */
.el-row {
  margin-top: 20px;
  justify-content: space-between; /* 元素之间的间距均匀分布 */
}

/* 列样式 */
.el-col {
  padding: 0 10px; /* 列之间的间距 */
}

/* 按钮样式 */
.el-button {
  background-color: #007BFF; /* 主题色 */
  border-color: #007BFF; /* 主题色 */
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  transition: background-color 0.3s, border-color 0.3s;
}

.el-button:hover {
  background-color: #0056b3; /* 深色主题色 */
  border-color: #0056b3; /* 深色主题色 */
}

/* 文章列表样式 */
.app {
  background-color: #ffffff; /* 白色背景 */
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
}

.post {
  background: #f9f9f9; /* 浅灰色背景 */
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 15px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.post:hover {
  transform: translateY(-5px); /* 鼠标悬停时上移 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 鼠标悬停时阴影加深 */
}

.post-title {
  font-size: 18px;
  font-weight: bold;
  color: #333; /* 深灰色标题 */
  margin-bottom: 10px;
}

.post-content {
  font-size: 14px;
  color: #666; /* 浅灰色内容 */
}

/* 文章详情弹窗样式 */
.el-drawer {
  background-color: #ffffff; /* 白色背景 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影 */
  padding: 20px; /* 增加内边距 */
}

.article-details {
  /* 移除默认字体大小设置 */
}

.article-title {
  font-size: 24px; /* 增大题目的字体大小 */
  color: red; /* 题目颜色 */
  margin-bottom: 15px; /* 增加题目与内容之间的间距 */
}

.article-subtitle {
  font-size: 25px; /* 题目副标题的字体大小 */
  color: blue; /* 深灰色 */
  margin-bottom: 10px; /* 副标题与内容之间的间距 */
}

.article-content {
  font-size: 20px; /* 内容的字体大小 */
  color: #666; /* 浅灰色内容 */
  margin-bottom: 5px; /* 内容之间的间距 */
}


</style>
